<template>
  <div style="line-height: 60px; display: flex;">
    <div style="flex: 1;">
        <span :class="collapseBtnClass" style="cursor: pointer;  font-size: 18px;" @click="collapse"></span>

        <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px;">
            <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div style="height: 60px; margin-right: 10px;">
        <el-avatar style="margin-top: 10px;" fit="fill">
            <img :src="headPitureUrl"/>
        </el-avatar>
    </div>
    <el-dropdown style="width:70px; cursor: pointer; display: flex;">
        <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px; line-height: 60px;"></i>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><router-link to="/personalCenter" style="text-decoration: none;">个人信息</router-link></el-dropdown-item>
            <el-dropdown-item><router-link to="" style="text-decoration: none;">退出</router-link></el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Header',
    props: {
        collapseBtnClass: String,
        collapse: Function,
    },
    computed: {
        currentPathName() {
            return this.$store.state.currentPathName  // 需要监听的数据
        }
    },
    watch: {
        currentPathName (newVal, oldVal) {
            console.log(newVal,oldVal);
        }
    },
    data() {
        return {
            headPitureUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        }
    }
}
</script>

<style>

</style>